<template>
  <div class="index" @click="showPopupS" id="ibok" :class="[`bgc-${type}`]">
    <!-- 点击弹出设置 -->
    <div>
      <!-- 导航 -->
      <van-popup v-model="showfalg" position="top" :style="{ width: '100%' }" :overlay="overlay" class="popu">
        <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft(radbook.book_id)" @click-right.stop="onClickRight(radbook.book_id)" class="popu">
          <template #right>
            <img :src="images[4].img" alt="" style="width: 20px" />
          </template>
        </van-nav-bar>
      </van-popup>
      <!-- 下面 -->
      <van-popup v-model="showfalg" position="bottom" :style="{ width: '100%' }" :overlay="overlay" class="popu">
        <!-- 进度 -->
        <div v-if="showjindu">
          <div class="shojs">
            <div @click.stop="upItem">上一章</div>
            <div>第 {{ radbook.chapter_id }} 章 {{ radbook.chapter }}</div>
            <div @click.stop="nexItem">下一章</div>
          </div>
          <van-divider :style="{ borderColor: 'white' }" />
          <van-progress :percentage="sop" :show-pivot="showpivot" />
          <van-divider :style="{ borderColor: 'white' }" />
        </div>
        <!-- 设置 -->
        <div v-if="showshezhi">
          <!-- 字体 -->
          <div class="shojs">
            <span @click.stop="fontsize--"> A- </span>
            <span @click.stop="fontsize++"> A+ </span>
          </div>
          <van-divider :style="{ borderColor: 'white' }" />
          <!-- 更改背景色 -->
          <div class="shoshez">
            <div class="box box1" @click.stop="type = 2"></div>
            <div class="box box2" @click.stop="type = 3"></div>
            <div class="box box3" @click.stop="type = 4"></div>
            <div class="box box4" @click.stop="type = 5"></div>
          </div>

          <van-divider :style="{ borderColor: 'white' }" />
        </div>
        <!-- 模块 -->
        <div class="dldt">
          <dl class="dls" @click.stop="catalog">
            <dt class="dlt"><img :src="images[1].img" alt="" style="width: 40px" /></dt>
            <dd class="dld">目录</dd>
          </dl>
          <dl class="dls" @click.stop="baiye">
            <dt class="dlt"><img :src="baiye2 == true ? images[0].img : images[5].img" alt="" style="width: 40px" /></dt>
            <dd class="dld" v-text="baiye2 == true ? '夜间' : '白天'"></dd>
          </dl>
          <dl class="dls" @click.stop="shjindu">
            <dt class="dlt"><img :src="images[3].img" alt="" style="width: 40px" /></dt>
            <dd class="dld">进度</dd>
          </dl>
          <dl class="dls" @click.stop="shezhi">
            <dt class="dlt"><img :src="images[2].img" alt="" style="width: 40px" /></dt>
            <dd class="dld">设置</dd>
          </dl>
        </div>
      </van-popup>
    </div>
    <!-- 标题和内容 -->
    <div class="container">
      <h2>{{ radbook.chapter }}</h2>
      <div v-html="radbook.content" id="readbook" :style="{ fontSize: fontsize + 'px' }"></div>
      <!-- 底部模块 -->
      <div class="dibu">
        <van-button type="primary" @click.stop="upItem">上一章</van-button>
        <van-button type="primary" @click.stop="catalog">目录</van-button>
        <van-button type="primary" @click.stop="nexItem">下一章</van-button>
      </div>
    </div>
    <!-- 判断是否在书架上 -->

    <!-- 侧边目录模块 -->
    <van-popup v-model="show" position="right" :style="{ height: '100%' }">
      <p style="text-align: center; color: red">目录</p>
      <van-divider :style="{ borderColor: 'red' }"> </van-divider>
      <div v-for="(cataS, index) in catalogdata" :key="index">
        <van-cell :value="'第' + (parseInt(index) + 1) + '章' + ' ' + cataS.chapter" @click.stop="mulv(parseInt(index) + 1)" />
      </div>
    </van-popup>
  </div>
</template>

<script>
import axios from 'axios'
import { Button } from 'vant'
import { Popup } from 'vant'
import { NavBar } from 'vant'
import { Toast } from 'vant'
import merge from 'webpack-merge'
import { Cell, CellGroup } from 'vant'
import { Divider } from 'vant'
import { Progress } from 'vant'

export default {
  name: 'read_book',
  data() {
    return {
      baiye2: true,
      type: 1, //白1 黄2 蓝3 绿4 紫5 黑6
      fontsize: 16,
      showpivot: false,
      showjindu: false,
      showshezhi: false,
      overlay: false,
      showfalg: false,
      show: false,
      radbook: [],
      catalogdata: [],
      images: [
        { id: 1, img: require('@/assets/yejian.png') },
        { id: 2, img: require('@/assets/mulu.png') },
        { id: 3, img: require('@/assets/shezhi.png') },
        { id: 4, img: require('@/assets/jindu.png') },
        { id: 5, img: require('@/assets/book.png') },
        { id: 6, img: require('@/assets/baitian.png') }
      ]
    }
  },
  methods: {
    // 上一章
    upItem() {
      let item = this.$route.params.chapterID
      if (item <= 1) {
        Toast('第一章了')
        return false
      } else {
        item = item - 1
      }
      this.$router.push({
        params: { ...this.$route.params, chapterID: item }
      })
    },
    // 下一章
    nexItem() {
      let item = this.$route.params.chapterID
      if (item < this.catalogdata.length) {
        // console.log(11)
        item = parseInt(item) + 1
      } else {
        Toast('最新一章')
        return false
      }
      this.$router.push({
        params: { ...this.$route.params, chapterID: item }
      })
    },
    // 目录
    catalog() {
      this.show = true
    },
    // 目录跳转
    mulv(index) {
      this.$router.push({
        params: { ...this.$route.params, chapterID: index }
      })
      this.show = false
    },
    // 显示弹窗
    showPopupS() {
      if (this.showfalg) {
        this.showfalg = false
      } else {
        this.showfalg = true
      }
      this.showshezhi = this.showjindu = false
    },
    // 返回 且记录进度
    onClickLeft(id) {
      // 记录进度
      axios({
        method: 'post',
        url: this.baseURL + '/api/api/read_hirstory',
        data: {
          id_card: localStorage.getItem('id_card'),
          book_id: id,
          chapter_id: this.$route.params.chapterID
        }
      })
      // 返回
      this.$router.push({
        path: `/bookDetail/${id}`
      })
    },
    // 加入书架
    onClickRight(id) {
      // console.log(id)
      axios({
        method: 'post',
        url: this.baseURL + '/api/api/add_bookshelf',
        data: {
          id: id,
          username: localStorage.getItem('id_card')
        }
      }).then((res) => {
        if (res.data.code == 0) {
          Toast(res.data.msg)
        }
        if (res.data.code == 1) {
          Toast(res.data.msg)
        }
      })
    },
    // 判断书架上是否有书
    fuai() {
      axios({
        method: 'post',
        url: this.baseURL + '/api/api/read_book/:id/:chapterID',
        data: {
          username: localStorage.getItem('id_card'),
          book_id: this.$route.params.id,
          chapter_id: this.$route.params.chapterID
        }
      }).then((res) => {
        // console.log(res)
        if (res.data.codes == 0) {
          Toast(res.data.msg)
          this.$router.push('/book')
        }
        this.radbook = res.data
        // console.log(this.radbook)
      })
    },
    // 进度
    shjindu() {
      if (this.showjindu) {
        this.showjindu = false
      } else {
        this.showshezhi = false
        this.showjindu = true
      }
    },
    // 设置
    shezhi() {
      if (this.showshezhi) {
        this.showshezhi = false
      } else {
        this.showjindu = false
        this.showshezhi = true
      }
    },
    Abooksj() {
      if (this.booksize < 20) {
        this.booksize += 2
        document.getElementById('readbook').style.fontSize = this.booksize + 'px'
      } else {
        Toast('字体最大了')
      }
    },
    // 白夜
    baiye() {
      this.baiye2 = !this.baiye2
      if (this.baiye2) {
        this.type = 1
      } else {
        this.type = 6
      }
    }
  },
  // 计算属性
  computed: {
    // 进度条
    sop() {
      return parseInt((this.$route.params.chapterID / this.catalogdata.length) * 100)
    }
  },
  mounted() {
    // 判断书架上是否有书
    this.fuai()
    // 获取书的文章和数据
    axios({
      method: 'post',
      url: this.baseURL + '/api/api/catalog',
      data: {
        id: this.$route.params.id
      }
    }).then((result) => {
      this.catalogdata = result.data
    })
  },
  watch: {
    $route: 'fuai'
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style lang="scss" scoped>
.index {
  height: 100%;
  // background-color: rgb(137, 255, 147);
}
h2 {
  margin: 0px auto;
  text-align: center;
}
.popu {
  background-color: black;
  opacity: 0.9;
  color: white;
}
.dldt {
  display: flex;
  justify-content: space-around;
}
.dls {
  width: 80px;
  /* border: 1px solid red; */
}
.dlt {
  text-align: center;
}
.dld {
  color: white;
  text-align: center;
  margin: 0px auto;
}
.shojs {
  height: 30px;
  /* color: white; */
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.shoshez {
  width: 100%;
  height: 30px;
  display: flex;
  flex-wrap: nowrap;
  /* flex-direction: row; */
  justify-content: space-around;
  align-items: center;
  color: aliceblue;
}
.box {
  width: 60px;
  height: 30px;
  border-radius: 5px;
  /* border: 1px solid red; */
}
.box1 {
  background-color: rgb(255, 215, 106);
}
.box2 {
  background-color: rgb(154, 195, 248);
}
.box3 {
  background-color: rgb(137, 255, 147);
}
.box4 {
  background-color: rgb(241, 184, 255);
}
#readbook {
  font-size: 14px;
}
.dibu {
  display: flex;
  justify-content: space-around;
}
</style>

<style lang="scss">
@mixin bgc($color, $bgc) {
  .container {
    background-color: #{$bgc};
    color: #{$color};
  }
}
.bgc-1 {
  @include bgc('#000', '#fff');
}
.bgc-2 {
  @include bgc('#000', 'rgb(255, 215, 106)');
}
.bgc-3 {
  @include bgc('#000', 'rgb(154, 195, 248)');
}
.bgc-4 {
  @include bgc('#000', 'rgb(137, 255, 147)');
}
.bgc-5 {
  @include bgc('#000', 'rgb(241, 184, 255)');
}
.bgc-6 {
  @include bgc('#fff', '#000');
}
</style>